import { getHospitalShow } from "@/api/hospital/hospitalList";
import { HospitalShowResponse } from "@/api/hospital/hospitalList/types";
import { Badge, Button, Card, Descriptions } from "antd";
import React, { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";

export default function HospitalShow() {

  const navigate = useNavigate()

  //获取 url 中的医院 id 参数
  let {id} = useParams();
  //状态声明   设置状态变量的初始值时, 可以不传入实参, 此时状态变量的值为『undefined』
  let [hospital, setHospital] = useState<HospitalShowResponse>();

  //定义 useEffect 回调
  useEffect(() => {
    //定义函数
    let getData = async () => {
      //请求获取医院数据
      let data = await getHospitalShow(id as string);
      //更新状态
      setHospital(data);      
    }
    getData();
  }, []);

  return (
    <Card>
      <Descriptions title="基本信息" bordered>{/* 可选链: 表达式?.xxx   等同于:  表达式 && 表达式.xxx  不需要自己写 */}
        <Descriptions.Item label="医院名称" labelStyle={{width: 150}}>{hospital?.hospital.hosname}</Descriptions.Item>
        <Descriptions.Item label="医院logo" span={2}>
          <img style={{width: 70, height: 70}} src={'data:image/jpeg;base64,' + hospital?.hospital.logoData}></img>
        </Descriptions.Item>
        <Descriptions.Item label="医院编码">{hospital?.hospital.hoscode}</Descriptions.Item>
        <Descriptions.Item label="医院地址" span={2}>
          {hospital?.hospital.param.fullAddress}
        </Descriptions.Item>
        <Descriptions.Item label="坐车路线" span={3}>
          {hospital?.hospital.route}
        </Descriptions.Item>
        <Descriptions.Item label="医院简介" span={3}>
          {hospital?.hospital.intro}
        </Descriptions.Item>
      </Descriptions>
      <div className="h-20"></div>
      <Descriptions title="预约规则信息" bordered>
        <Descriptions.Item label="预约周期" labelStyle={{width: 150}}>{hospital?.bookingRule.cycle}天</Descriptions.Item>
        <Descriptions.Item label="放号时间" span={2}>
          {hospital?.bookingRule.releaseTime}
        </Descriptions.Item>
        <Descriptions.Item label="停挂时间">12:30</Descriptions.Item>
        <Descriptions.Item label="退号时间" span={2}>
          {hospital?.bookingRule.quitTime}
        </Descriptions.Item>
        <Descriptions.Item label="预约规则" span={3}>
          {
            hospital?.bookingRule.rule.map((item, index) => <div>{index + 1}. {item}</div>)
          }
        </Descriptions.Item>
      </Descriptions>
      <div className="h-20"></div>  {/* 使用replace模式(不能通过点击回退导航回到当前页面) */}
      <Button onClick={() => navigate('/syt/hospital/hospitalList', {replace: true})}>返回</Button>
    </Card>
  );
}
